<template>
    <div>
        <el-card class="article-select">
            <!--面包屑导航-->
            <div slot="header" class="clearfix">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>评论管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <el-table
                    :data="commentData"
                    style="width: 100%"
                    class="comment-table"
            >
                <el-table-column
                        prop="title"
                        label="标题"
                >
                </el-table-column>
                <el-table-column
                        prop="total_comment"
                        label="总评论数"
                >
                </el-table-column>
                <el-table-column
                        prop="fans_comment"
                        label="粉丝评论数">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="状态">
                    <template slot-scope="scope">
                        {{scope.row.comment_state? '正常':'关闭'}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="操作">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.comment_state"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>
            </el-table>
            <!--页码-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange(current_page)"
                    :current-page.sync="current_page"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size.sync="page_size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total_page">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "comment",
        data() {
            return {
                commentData:[],
                current_page:1,
                total_page:0,
                page_size:10
            }
        },
        created() {
            this.getCommentData(this.current_page)
            this.total_page = this.$store.state.commentData.length
        },
        methods: {
            handleSizeChange(){
                this.getCommentData()
            },
            handleCurrentChange(current_page){
                this.getCommentData(current_page)
            },
            getCommentData(page = 1,page_size = 10){
                this.current_page = page
                page_size = this.page_size
                this.commentData = this.$store.state.commentData.slice(page_size*(page-1), page_size*page)
            }
        }
    }
</script>

<style scoped lang="scss">
    .comment-table{
        margin-bottom: 20px;
    }
</style>
